<template>
 <transition name="slide">
  <div class="search">
    <div class="search-box-warpper">
      <i class="icon-back icon-font" @click="back">&#xe697;</i>
      <search-box  ref="searchBox"></search-box>
    </div>
    <div class="division"></div>
    <div ref="shortcutWrapper" class="shortcut-wrapper">
        <div>
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul>
              <li @click="addQuery(item.k)" class="item" v-for="(item,index) in hotKey" :key="index">
                <span>{{item.k}}</span>
              </li>
            </ul>
          </div>
          <div class="search-history">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span @click="showConfirm" class="clear">
                <i class="icon-clear icon-font">&#xe69d;</i>
              </span>
            </h1>
           <!--  <search-list ></search-list> -->
          </div>          
        </div>
    </div>
    <confirm ref="confirm" text="是否清空所有搜索历史" confirmBtnText="清空"></confirm>    
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
   </transition>
</template>

<script>
  import SearchBox from 'base/search-box/search-box'
  import SearchList from 'base/search-list/search-list'
  import Confirm from 'base/confirm/confirm'
  import Suggest from 'components/suggest/suggest'
  import {ERR_OK} from 'api/config'
  import {getHotKey} from 'api/search'
  export default {
    data() {
      return {
        hotKey: []
      }
    },
    computed: {

    },
    created() {
       this._getHotKey()
    },
    methods: {
      back() {
        this.$router.back()
      },
      addQuery(query){
        this.$refs.searchBox.setQuery(query)
        this.$router.push({
          path: `/search/search-result`
        })        
      },
      showConfirm() {
        this.$refs.confirm.show()
      },      
      _getHotKey() {
        getHotKey().then((res) => {
          if (res.code === ERR_OK) {
            this.hotKey = res.data.hotkey.slice(0, 10)
          }
        })
      },      
    },
    watch: {

    },
    components: {
      SearchBox,
      SearchList,
      Confirm,
      Suggest
    }
  }
</script>

<style lang="scss" rel="stylesheet/css">
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .search{
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-highlight-background;
    &.slide-enter-active, &.slide-leave-active{
      transition: all 0.3s;
    }
    &.slide-enter, &.slide-leave-to{
      transform: translate3d(100%, 0, 0);    
    }
    .search-box-warpper{
      height: 45px;
      line-height: 45px;
      padding-top: 10px;
      position: relative;
      background-color: #fff;      
    }
    .shortcut-wrapper{
      position: fixed;
      top: 100px;
      bottom: 0;
      width: 100%;

        .hot-key{
          margin: 0 20px 20px 20px;
          .title{
            margin-bottom: 20px;
            font-size: $font-size-medium;
            color: $color-text-l ;           
          }

          .item{
            display: inline-block;
            padding: 5px 10px;
            margin: 0 20px 10px 0;
            border-radius: 6px;
            background: $color-highlight-background;
            font-size: $font-size-medium;
            color: $color-text-d;            
          }          
        }
      }

      .icon-back{
        font-weight: bold;
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 22px;
      }

        .search-history{
          position: relative;
          margin: 0 20px;
          .title{
            display: flex;
            align-items: center;
            height: 40px;
            font-size: $font-size-medium;
            color: $color-text-l;
            .text{
              flex: 1
            }
            .clear{
               @include extend-click;
              .icon-clear{
                font-size: $font-size-medium;
                color: $color-text-d;                
              }              
            }                      
          }          
        }

    .search-result{
      position: fixed;
      width: 100%;
      top: 178px;
      bottom: 0 ;     
    }    
  }


</style>